import MyHeader from './components/MyHeader'
import MyFooter from './components/MyFooter'
import GoodsItem from './components/GoodsItem'
import { useState, useEffect } from 'react'
import './App.scss'

export default function App () {
  // !#1 初始值改成空数组
  const [list, setList] = useState([])
  // !#1. 父组件定义修改状态的方法并传递给子组件
  const changeStatus = (id) => {
    // !#3. 父组件根据传递过来参数做相应的操作
    setList(
      list.map(item => {
        if (item.id === id) {
          return {
            ...item,
            goods_state: !item.goods_state
          }
        } else {
          return item
        }
      })
    )
  }
  // 全选
  // !#1. 父组件定义修改状态的方法并传递给子组件
  const changeAllStateus = (stateus) => {
    // !#3. 父组件根据传递过来参数做相应的操作
    setList(
      list.map(item => {
        return {
          ...item,
          goods_state: stateus
        }
      })
    )
  }
  useEffect(() => {
    const arr = JSON.parse(localStorage.getItem('listArr') || [])
    // 本地有就用本地的并同步到状态
    if (arr.length) {
      return setList(arr)
    }
    // !#2 本地没有就从远端请求
    const getList = async () => {
      const res = await fetch('https://www.escook.cn/api/cart')
      // !#3 如果后端返回的是 JSON 格式的字符串，需要通过 r.json() 转成对象，r.json() 返回的还是一个 Promise
      const data = await res.json()
      setList(data.list)
    }
    getList()
  }, [])
  // 持久化
  useEffect(() => {
    localStorage.setItem('listArr', JSON.stringify(list))
  }, [list])

  return (
    <div className="app">
      <MyHeader>购物车</MyHeader>

      {list.map((item) => (
        <GoodsItem key={item.id} {...item} changeStatus={changeStatus}></GoodsItem>
      ))}

      <MyFooter list={list} changeAllStateus={changeAllStateus}></MyFooter>
    </div>
  )
}
